/**
 * @description 详情
 */



import React, { useState, useMemo } from "react"
import { Button, Tabs } from "antd"

import AbIcon from "@/components/DecorateIcons/Ab_Icon"
import ListHot from "@/PageCompnents/Hot/ListHot"
import ListRecommend from "../Newslist/ListRecommend"
import DiscussTab from "../Detail/Component/DiscussTab"

const content = '无穷无尽是离愁，天涯海角遍寻思。当离别在即之时，当面对着相濡以沫兄弟般的朋友时，当面对着经历了四年的磨合而形成的真挚友谊之时，我内心激动无语，说一声再见，道一声珍重都很难出口。回想自己四年大学的风风雨雨，回想我们曾经共同经历的岁月流年，我感谢大家的相扶相依，感谢朋友们的莫大支持与帮助。虽然舍不得，但离别的脚步却不因我们的挚情而停滞。离别的确是一种痛苦，但同样也是我们走入社会，走向新环境、新领域的一个开端，希望大家在以后新的工作岗位上能够确定自己的新起点，坚持不懈，向着更新、更高的目标前进，因为人生最美好的东西永远都在最前方!'

function NewsdetailPage({ newsdetail, paginationBase, discussBase }) {

  let {
    iconFlag,
    labelFlag,
    pre_icon,
    next_icon
  } = newsdetail.newsattr.base
  let {
    thumbsup_icon,
    thumbsuped_icon,
    storeup_icon,
    storeuped_icon,
  } = newsdetail.operate.base

  // 是否点赞
  const [thumbsUpId, setThumbsUpId] = useState('')
  // 是否收藏
  const [storeUpId, setStoreUpId] = useState('')

  // tab
  const tabList = useMemo(() => {
    return [
      {
        key: "discuss",
        label: "评论",
        children: <DiscussTab base={discussBase} paginationBase={paginationBase} />,
      },
    ]
  }, [])

  return (
    <div className="newsdetail">

      {/* 页面标题 */}
      <div className="header">
        <div className="text">新闻资讯</div>
      </div>

      {/* 新闻详情 */}
      <div className="newsattr">

        <div className="title">新闻的标题</div>

        <div className="info">

          {/* 时间 */}
          <div className='time' >
            {
              iconFlag &&
              <AbIcon iconName='FieldTimeOutlined' className='icon'></AbIcon>
            }
            {
              labelFlag &&
              <span className="prefix">时间:</span>
            }
            <span className="text">2024-11-17 10:30:00</span>
          </div>

          {/* 发布人 */}
          <div className='publisher' >
            {
              iconFlag &&
              <AbIcon iconName='UserOutlined' className='icon'></AbIcon>
            }
            {
              labelFlag &&
              <span className="prefix">发布人:</span>
            }
            <span className="text">管理员</span>
          </div>



          {/* 点赞 */}
          <div className='like' >
            {
              iconFlag &&
              <AbIcon iconName='LikeOutlined' className='icon'></AbIcon>
            }
            {
              labelFlag &&
              <span className="prefix">点赞:</span>
            }
            <span className="text">9</span>
          </div>

          {/* 收藏 */}
          <div className='collect' >
            {
              iconFlag &&
              <AbIcon iconName='StarOutlined' className='icon'></AbIcon>}
            {
              labelFlag &&
              <span className="prefix">收藏:</span>
            }
            <span className="text">9</span>
          </div>

          {/* 查看 */}
          <div className='view' >
            {
              iconFlag &&
              <AbIcon iconName='EyeOutlined' className='icon'></AbIcon>
            }
            {
              labelFlag &&
              <span className="prefix">查看:</span>
            }
            <span className="text">99</span>
          </div>
        </div>

        {/* 操作 */}
        <div className="operate">
          {/* 点赞 */}
          <Button type='text' className="thumbs-btn" icon={<AbIcon className='icon' iconName={thumbsUpId ? thumbsuped_icon : thumbsup_icon} />} onClick={() => setThumbsUpId(thumbsUpId ? '' : '1')}>{thumbsUpId ? '取消赞' : '点赞'}</Button>
          {/* 收藏 */}
          <Button type='text' className="store-btn" icon={<AbIcon className='icon' iconName={storeUpId ? storeuped_icon : storeup_icon} />} onClick={() => setStoreUpId(storeUpId ? '' : '1')}>{storeUpId ? '取消收藏' : '收藏'}</Button>

        </div>

        {/* 内容 */}
        <div className="content" dangerouslySetInnerHTML={{ __html: content }}></div>

        {/* 上下篇 */}
        <div className="nav">

          <div className="pre" >
            <AbIcon className='icon' iconName={pre_icon} />
            <span className='text' > 上一篇</span >
          </div>

          <div className="next" >
            <AbIcon className='icon' iconName={next_icon} />
            <span className='text' > 下一篇</span >
          </div>

        </div>

      </div>

      {/* 商品详情: tab标签页 */}
      <Tabs
        className='detailtab'
        destroyInactiveTabPane={true}
        items={tabList}
      />

      {/* 热门新闻 */}
      <ListHot base={newsdetail.newsdetailhot.base} className="newsdetailhot" />

      {/* 最新新闻 */}
      <ListRecommend base={newsdetail.newsdetailrecommend.base} className="newsdetailrecommend" />

    </div >
  )
}

export default React.memo(NewsdetailPage)